<template>
  <a-config-provider :locale="zhCN">
    <router-view v-if="visible === false" />
    <div v-if="visible" class="loading-container">
      <div class="loading-text">Loading</div>
    </div>
    <iframe id="encryptIFrame" name="test" style="display: none" :src="iframeSrc" />
  </a-config-provider>

  <!--<div class="expiration-container">-->
  <!--  <div class="title">试用版</div>-->
  <!--  <div class="sub-title">到期时间:{{ expirationDate }}</div>-->
  <!--</div>-->
</template>

<script setup>
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
import { onMounted, ref } from 'vue'

const visible = ref(true)
const timer = ref(null)
const iframeSrc = window.location.origin

timer.value = setInterval(() => {
  const h1El = window.frames['test'].document.querySelector('h1')
  if (h1El && h1El.innerHTML === 'Security Enhance') {
    visible.value = false
    clearInterval(timer.value)
  }
}, 500)

onMounted(() => {})
</script>

<style scoped lang="less">
.loading-container {
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background-color: #4384f5;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .loading-text {
    font-size: 30px;
    background: conic-gradient(#dff2ae 0 25%, #ff904f 25% 50%, #feefe7 50% 75%, #ffde2b 75% 100%);
    background-size: 200% 200%;
    animation: ani 4.5s ease-in-out infinite;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
  }
  @keyframes ani {
    25% {
      background-position: 0 100%;
    }
    50% {
      background-position: 100% 100%;
    }
    75% {
      background-position: 100% 0%;
    }
    100% {
      background-position: 0 0;
    }
  }
}
.expiration-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  color: rgba(255, 255, 255, 0.8);
  .title {
    font-size: 20px;
    font-weight: bold;
  }
  .sub-title {
    font-weight: bold;
  }
}
</style>
